<template>
  <div class="login">
    <!--  -->
    <h1>登录用户</h1>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="form.userName"
          name="userName"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />

        <van-field
          v-model="form.passWord"
          name="passWord"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div class="tj">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="submitFun(form)"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { login } from "../../api/index";
import { useRouter } from "vue-router";
const router = useRouter();
// imports and composables
const form = reactive({
  userName: "",
  passWord: "",
});

const submitFun = () => {
  login({ userName: form.userName, passWord: form.passWord }).then(
    ({ data }) => {
      if (data.code === 10000) {
        console.log(data);
        showNotify({ type: "success", message: "登录成功" });
        localStorage.setItem("h5_token", data.data.token);
        localStorage.setItem("h5_userInfo", JSON.stringify(data.data.userInfo));
        router.push("/home");
      }
    }
  );
};
</script>

<style lang="less" scoped>
/* styles */
.login {
  h1 {
    text-align: center;
  }
}
.tj {
  margin: 16px;
}
</style>